<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../src/css/public.css">
<link rel="stylesheet" href="../src/css/car.css">

<body>
    <header>
        <div class="center header-top">
            <span>一年逛两次 <img src="../static/img/logo.png" alt=""> 每次都有新选择！</span>
            <ul>
                <li class="vip">尊敬的&nbsp;<a href="./mine.html" class="vip-name" title="个人主页"> </a>&nbsp;:&nbsp;您好
                </li>
                <li class="vip-login"><a href="./login.html" title="登录">登录</a></li>
                <li class="vip-register"><a href="./register.html" title="注册账号">注册</a></li>
                <li><a href="../index.html" title="主页">主页</a></li>
                <li class="call"><a href="./call.html" title="call me">联系我们</a></li>
            </ul>
        </div>
    </header>
    <div class="header-box">
        <div class="logo-big">
            <a href="../index.html" class="big-one"><img src="../static/img/logo (5).png" alt=""
                    title="super clothes"></a>
            <a href="../index.html" class="big-two"><img src="../static/img/logo (4).png" alt=""
                    title="super clothes"></a>
        </div>
        <div class="car iconfont">
            <a href="./list.html" class="iconfont" title="购物车里的商品还不够满意？那就接着shopping!">返回shopping
                <span class="car-wu"></span>
                <span class="car-tu">GO</span>
            </a>
        </div>
    </div>

    <table id="car">
        <thead>
            <tr>
                <th><label><input class="checkAll" type="checkbox" />&nbsp;全选</label></th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <table id="carfoot">
        <thead>
            <tr>
                <th><label><input class="checkAll" type="checkbox" />&nbsp;全选</label></th>
                <th>
                    <p>已选商品： <span class="numberCount"> </span> 件 &nbsp;&nbsp;&nbsp;&nbsp; 合 计 ：￥<span
                            class="priceCount"> </span></p>
                </th>
                <th><button class="jiesuan">结 算</button></th>
            </tr>
        </thead>
    </table>
    <div id="dog">
        <img src="../static/dog.jpg" alt="" title="返回顶部">
    </div>
</body>
<script src="../dist/js/jquery.min.js"></script>
<script src="../src/js/free.js"></script>
<script src="../src/js/public.js"></script>
<script type="text/javascript">
    function loadPage() {
        var str = localStorage.getItem("data");
        var arr = JSON.parse(str);
        if(!arr){
            arr = []
        }
        if (arr == '') {
            html = `<tr class="kong">
                <td colspan = 6>
                    <span>😭</span>
                    <p>购物车空空如也，快去挑选商品来填满购物车吧！</p>
                </td>
                </tr> `
        } else {
            var html = '';
            var arrl = arr.length;
            for (var i = 0; i < arrl; i++) {
                html += `<tr>
        <td class="check"><input class="checkOne" type="checkbox" /></td>
        <td class="cloth"><img src="${arr[i].images}" alt="" width="100" height="100"><span>${arr[i].name}</span></td>
        <td class="price">${arr[i].price}</td>
        <td class="number">
            <button class="down">-</button><input type="number" class="num" value="${arr[i].number}"><input type="hidden" name="kucun" value="${arr[i].all}"><button class="add">+</button>
        </td>
        <td class="xiaoji">￥<span class="xiaojiNum">${(arr[i].number*arr[i].price).toFixed(2)}</span></td>
        <td class="remove" data-id="${arr[i].id}">删除</td>
    </tr>`
            }
        }

        $("tbody").html(html);
        checkOneClick();
        curAdd();
        $(".jiesuan").click(function () {
            localStorage.clear();
            location.href = './jiesuan.html';
            return false;
        });
        $(".remove").each(function () {
            $(this).click(function () {
                var opp = confirm("你确定删除该商品？");
                if (opp) {
                    var arr = JSON.parse(localStorage.getItem("data"));
                    var id = $(this).attr("data-id");
                    var key;
                    console.log(arr, id)
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i].id == id) {
                            key = i;
                        }
                    }
                    arr.splice(key, 1);
                    localStorage.setItem("data", JSON.stringify(arr));
                    $(".checkAll").prop("checked", false);
                    loadPage();
                    checkOneClick();
                    count();
                }
            })
        })
    }
    loadPage();

    function checkOneClick() {
        $(".checkOne").click(function () {
            var arr = Array.prototype.slice.call($(".checkOne"));
            // console.log(arr)
            var res = arr.every(function (v) {
                // console.log()
                if ($(v)[0].checked) {
                    return true;
                }
            });
            if (res) {
                $(".checkAll").prop("checked", true);
            } else {
                $(".checkAll").prop("checked", false);
            }
            count();
        })
    }

    function recun() {
        var str = localStorage.getItem("data");
        var arr = JSON.parse(str);
        for (var i = 0; i < arr.length; i++) {
            $(".remove").each(function (i, v) {
                if (arr[i].id == $(v).attr("data-id")) {
                    arr[i].number = $(v).siblings(".number").children(".num").val() - 0;
                }
            });
        }
        localStorage.clear();
        localStorage.setItem("data", JSON.stringify(arr));
    }

    function jisuanxiaoji() {
        $(".xiaojiNum").each(function () {
            var num = $(this).parent().siblings(".number").find(".num").val() - 0;
            var price = parseFloat($(this).parent().siblings(".price").text()).toFixed(2);
            $(this).text((price * num).toFixed(2));
        })
    }

    $(".checkAll").click(function () {
        var c = $(this).prop("checked");
        // console.log(c    )
        if (c) {
            $(".checkOne").prop("checked", true);
            $(".checkAll").prop("checked", true);
        } else {
            $(".checkOne").prop("checked", false);
            $(".checkAll").prop("checked", false);
        }
        count();
    })

    function count() {
        var numberCount = 0;
        var xiaojiNum = 0;
        $(".checkOne:checked").each(function (k, v) {
            numberCount += $(v).parent(".check").siblings(".number").children(".num").val() - 0;

            xiaojiNum += $(v).parent(".check").siblings(".xiaoji").children(".xiaojiNum").text() - 0;

        });
        // console.log(numberCount)
        $(".numberCount").text(numberCount);
        $(".priceCount").text(xiaojiNum.toFixed(2));
    }

    function curAdd() {
        $(".number").click(function (e) {
            var target = e.target;
            if (target.className == "down") {
                if ($(this).find(".num").val() - 0 - 1 <= 1) {
                    var num = 1;
                } else {
                    var num = $(this).find(".num").val() - 0 - 1;
                }
                $(this).find(".num").val(num);
            }
            if (target.className == 'add') {
                if ($(this).find(".num").val() - 0 + 1 > $(this).find("[name='kucun']").val() - 0) {
                    var num = $(this).find("[name='kucun']").val() - 0;
                    alert("已达该商品最大库存！")
                } else {
                    var num = $(this).find(".num").val() - 0 + 1;
                }
                $(this).find(".num").val(num);
            }
            jisuanxiaoji();
            recun();
            count();
        });
    }
</script>

</html>